<template>
  <div class="income-item">
    <div class="item-tag" v-for="tag in tags">
      <a class="tag" :class="{ checked: tag === tagStore.selectTag.income }" @click="select(tag)">{{ tag }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import '@/assets/styles/tagitem.css'
import { TagType } from '@/types/types'
import { useTagStore } from '@/store/tags'
const tagStore = useTagStore()
const tags = tagStore.inComeTags
function select(tag: string) {
  tagStore.setTag(TagType.Income, tag)
}
</script>

<style scoped>
.income-item {
  --check-bg: #ecf5ff;
  --check-border: #d9ecff;
  --check-color: #409eff;
}
.checked {
  background-color: var(--check-bg);
  border: 1px solid var(--check-border);
  color: var(--check-color);
}
</style>
